import React, { Component } from 'react'

import TopNavBar from '@/components/TopNavBar'
import Swiper from '@/components/Swiper'

import { getSwiperListApi, getHotCateListApi } from '@/services/feedService'
import SearchBtn from '@/components/SearchBtn'
import HotCate from './ui/HotCate'

// 菜谱大全的首页
class Feed extends Component {
  state = {
    swiperData: null,
    hotCateData: []
  }

  async componentDidMount() {
    // let res = await getSwiperListApi()
    // this.state.swiperData = res.data

    this.state.swiperData = await (await getSwiperListApi()).data
    this.state.hotCateData = await (await getHotCateListApi()).data

    // this.setState({
    //   swiperData: res.data
    // })
    // 通知视图更新
    this.setState({})
  }

  render() {
    return (
      <div>
        {/* 顶部导航 */}
        <TopNavBar leftText="返回" onLeft={e => console.log(1000, e)}>
          菜谱大全
        </TopNavBar>
        {/* 幻灯片 */}
        <Swiper data={this.state.swiperData} />
        {/* 搜索按钮 */}
        <SearchBtn
          onClick={id => {
            this.props.history.push('/search')
          }}
          title="想吃什么搜索这里：如徽菜"
        />
        {/* 热门分类 */}
        <HotCate data={this.state.hotCateData} />
      </div>
    )
  }
}

export default Feed
